import './style/phone.module.css'
import { useState } from "react";
import { Button, Form, Input, Toast,NavBar } from "react-vant";
import { useNavigate } from "react-router-dom";
import { handleSendPhone } from '../../utils/api'
const Phone: React.FC = () => {
    const navigate = useNavigate();
    const [form] = Form.useForm();
    const [formValues, setFormValues] = useState({
        phone: ''
    });
    const YanZhen = (value: string) => {
        const guize = /^1[3-9]\d{9}$/
        return guize.test(value)
    }
    const [isLoading, setIsLoading] = useState(false);
    const onFinish = async () => {
        if ( !formValues.phone ) return;
        try{
            setIsLoading(true)
            Toast.loading({
                message: '正在发送验证码...',
                forbidClick: true,
                duration: 0,
            })
           
            const params = {
                phone: formValues.phone,
            }
            let res = await handleSendPhone(params)
            Toast.clear()
            if (res.data.code === 200) {
                Toast.success({
                    message: '验证码已发送，请注意查收',
                    duration: 1000,
                })
                await new Promise((resolve) => setTimeout(resolve, 2000))
                navigate('/phoneyz',{state:{phone:formValues.phone}})
            }else{
                Toast.fail({
                    message: '验证码发送失败，请稍后再试',
                })
            }
        } catch(error){
            console.log(error,'error');
            
        } finally{
            setIsLoading(false)
        }
    }
    const onValuesChange = (values: any) => {
            setFormValues(values)
    }
    return(
        <>
             <div className="yanzheng-box">
                <NavBar
                    title="手机号码"
                    onClickLeft={() => {navigate('/login')
                    }}
                />
                      <Form
                        form={form}
                        onFinish={onFinish}
                        onValuesChange={onValuesChange}
                        footer={
                            <div style={{ margin: '16px 16px 0' }}>
                                <Button round nativeType='submit' type='primary' block
                                    loading={isLoading}
                                    disabled={!YanZhen(formValues.phone)}
                                >
                                    继续
                                </Button>
                            </div>
                        }
                    >
                        <span className="parentBox-span">手机号</span>
                        <Form.Item
                            name='phone'
                            rules={[{ pattern:/^1[3-9]\d{9}$/, message: '请输入正确手机号' }]}
                        >
                            <Input placeholder='输入手机号' className="parentBox-input" />
                        </Form.Item>
                    </Form>
                </div>
               
        
        </>
    )
}
export default Phone